<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      * {
          /*width: 100%;*/
          margin: 0 auto;
          padding: 0;
          list-style: none;
          text-decoration: none;
		  box-sizing: border-box;
      }

      .headerTop {
          height: 100px;
          background: url('./img/header.jpg');

      }

      .headerTop_img {
          height: 100px;
          width: 25%;
          margin-left: 180px;

      }

      .navTop {
          height: 48px;
          width: 100%;
          background-color: #a52c12;
      }

      .menu-two-a {
          width: 109px;
          height: 48px;
          line-height: 48px;
          color: white;
      }

      .menu:hover {
          background-color: #f34f2a;
          cursor: pointer;
      }

      .firstMenu {
          width: 78%;
          height: 48px;
          background-color: #a52c12;
      }

      .firstMenu .menu-one .menu {
          float: left;
          text-align: center;
          width: 100px;

      }

      .firstMenu .menu-one .menu .menu-two { /*正常情况下二级菜单不显示*/
          background-color: #a52c12;
          display: none;
      }

      /*当鼠标悬浮在对应的一级菜单时，显示内容*/
      .firstMenu .menu-one .menu:hover .menu-two {
			display: block;
          position: absolute;
      }

      .firstMenu .menu-one .menu .menu-two li {
          height: 48px;
          line-height: 48px;
		  width: 100px;
          margin: 0;
      }

      .firstMenu .menu-one .menu .menu-two li * {
          color: white;
      }

      .firstMenu .menu-one .menu .menu-two li:hover {
          background-color: #f34f2a;
      }


	  .main-big{
		  margin-top: 20px;
		  /*height: 500px;*/
		  width: 78%;
		  display: flex;
		  flex-direction: row;
		  flex-wrap: wrap;
	  }


	  .main-left{
			margin: 0px auto;

	  }
	  .main-left-top{
		  width: 380px;
		  height: 40px;
          background: url("./img/titlebg5.jpg") green;
	  }
	  .main-left-top h3{
		  color: white;
		  line-height: 40px;
		  margin-left:12px ;
		  float: left;
	  }
	  .main-left-top a{
		  color: white;
		  line-height: 40px;
		  float: right;
		  font-size: 12px;
		  margin-right: 12px;
	  }
	  .main-left-bottom{
		  width: 380px;
		  height: 264px;
          background-color: #f8f8f8;
          padding: 12px 15px;
	  }
      .main-left-bottom-li{
		  width: 350px;
		  height: 252px;

	  }

      .main-left-bottom-li ul a{
		  float: left;
		  color: #333;
		  font-size: 14px;
		  height: 36px;
		  width: 338px;
		  line-height: 36px;
		  padding-left: 12px;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  white-space: nowrap;
	  }
      .main-left-bottom-li ul a:hover{
		  color: #f34f2a;
	  }

	  .main-center{
		  display: flex;
		  width: 400px;
		  height: 300px;
          background-color: darkcyan;
		  margin: 0 auto;
	  }

      .banner{
          position: relative;
          width: 400px;
          height: 300px;
      }
      .ulll {
          width: 2000px;
          height: 300px;
      }
      .ulll li{
          display: inline-block;
          margin: 0;
      }
      .divv{
          width: 400px;
          height: 300px;
          overflow: hidden;
      }
      .olll {
          position:absolute;
          width: 130px;
          height: 20px;
          margin-left: 260px;
      }
		.ulll li img{
			display: block;
			width: 400px;
			height: 300px;

		}
	.main-right{
		margin: 0 auto;
	}
	.main-bottom{
		margin: 20px auto;
	}

	.main-down-bottom{

		width: 100%;
		height: 145px;
        background-color: #f8f8f8;
	}
	.main-down-bottom ul{
		width: 1090px;
		height: 104px;
	}
	.main-down-bottom ul li{
		float: left;
		margin: 22px 42px;
	}
	.main-down-bottom ul li img{
		width: 70px;
		height: 70px;
	}

	.footer-big{
		width: 100%;
		height: 160px;
        background: url("./img/footer.jpg");
		padding: 30px 0;
	}

	.footer-big-div{
		width: 79%;
		height: 100px;
	}
	.footer-big-div img{

		height: 100px;
		float: left;
	}
      .footer-big-div div{
		  float: right;
	  }
	  .footer-big-div div p{
		  font-size: 14px;
		  color: #fff;
	  }


  </style>
</head>
<body>
<header class="headerTop">
  <div>
	<img class="headerTop_img" src="img/rzkxlogo.fw.png">
  </div>
</header>

<nav class="navTop">
  <div class="firstMenu">
	<ul class="menu-one">

	  <li class="menu">
		<a class="menu-two-a" href="#">首页</a>

	  </li>


	  <li class="menu">
		<a class="menu-two-a" href="">中心概况</a>
		<ul class="menu-two">
		  <li><a href="">中心简介</a></li>
		  <li><a href="">现任领导</a></li>
		  <li><a href="">成员构成</a></li>
		</ul>
	  </li>
	  <li class="menu">
		<a class="menu-two-a" href="#">规章制度</a>

	  </li>
	  <li class="menu">
		<a class="menu-two-a" href="">科学研究</a>
		<ul class="menu-two">
		  <li><a href="">论文论著</a></li>
		  <li><a href="">科学项目</a></li>
		</ul>
	  </li>
	  <li class="menu">
		<a class="menu-two-a" href="#">科研管理</a>
	  </li>
	  <li class="menu">
		<a class="menu-two-a" href="">交流合作</a>
		<ul class="menu-two">
		  <li><a href="">学术交流</a></li>
		  <li><a href="">对外合作</a></li>
		</ul>
	  </li>
	  <li class="menu">
		<a class="menu-two-a" href="">学院新闻</a>
	  </li>
	  <li class="menu">
		<a class="menu-two-a" href="">联系我们</a>
	  </li>
	</ul>
  </div>
</nav>


<main>
	<div class="main-big" >

	  <div class="main-left">

		<div class="main-left-top">
			<h3>学院新闻</h3>
		  	<a href="b.html">MORE+</a>
		</div>

		<div class="main-left-bottom">
			<li class="main-left-bottom-li">
			  <ul><a href="#">校长陈小林主持召开认知科学与跨学科研究中心开始执行</a></ul>
			  <ul><a href="#">学校召开期末领导干部会议</a></ul>
			  <ul><a href="#">我校隆重举行2022届毕业生典礼暨学位授予</a></ul>
			  <ul><a href="#">九江学院：“家书传家风”诵读活动让党员发展</a></ul>
			  <ul><a href="#">我校召开2022年国家级教学成果将申报工作推进</a></ul>
			  <ul><a href="#">“终极幻境杯”第八届九江学院“互联网+”大学</a></ul>
			  <ul><a href="#">九江学院举办创新创业实践成果展</a></ul>
			</li>
		</div>
	  </div>



	  <div class="main-right">
		<div class="main-left-top">
		  <h3>通知公告</h3>
		  <a href="#">MORE+</a>
		</div>

		<div class="main-left-bottom">
		  <li class="main-left-bottom-li">
			<ul><a href="#">2022年江西省认知科学与跨学科研究中心专项研究科</a></ul>
			<ul><a href="#">研究员向必灯博士做了关于概念知识启动的语境依赖原</a></ul>
			<ul><a href="#">李海舰教授关于认知和经济的学术报告</a></ul>
			<ul><a href="#">专场学术报告一“社会科学与人文科学的脑科学华及未</a></ul>
			<ul><a href="#">讲座预告-管理的人性基础</a></ul>
			<ul><a href="#">首届“全国教师发展论坛”火热报名中</a></ul>
			<ul><a href="#">主题讲座报告-《重新认识企业管理与创新-多学科知》</a></ul>
		  </li>
		</div>



	  </div>

	  <div class="main-bottom">
		<div class="main-left-top">
		  <h3>科研动态</h3>
		  <a href="#">MORE+</a>
		</div>
		<div class="main-left-bottom">
		  <li class="main-left-bottom-li">
			<ul><a href="#">认知中心科研项目一览表（2015-2021）</a></ul>
			<ul><a href="#">论文著作教材一览表（2017-2022）</a></ul>
		  </li>
		</div>
	  </div>


	  <div class="main-bottom">
		<div class="main-left-top">
		  <h3>学术交流</h3>
		  <a href="#">MORE+</a>
		</div>
		<div class="main-left-bottom">
		  <li class="main-left-bottom-li">
			<ul><a href="#">中心研究院李向华博士参加第一届国际术语高端论坛</a></ul>
			<ul><a href="#">中心研究院王彦博士参加中国心理学会2022年学</a></ul>
			<ul><a href="#">研究员向必灯博士在线参加了第20届全国科学哲学</a></ul>
			<ul><a href="#">2019首届搏鳌教育论坛</a></ul>
			<ul><a href="#">认知科学与跨学科研究中心4月29日举行学术会议</a></ul>
			<ul><a href="#">深圳大学理论经济学第48期博士沙龙超越新古典</a></ul>
			<ul><a href="#">设立伯乐奖 借力培养人才九江职业大学启动人</a></ul>
		  </li>
		</div>
	  </div>


	  <div class="main-center">
		<div class="banner">
		  <ol class="olll">
		  </ol>
		  <div class="divv">
			<ul class="ulll">
			  <li><img src="./img/1.jpg" alt=""></li><li><img src="./img/2.jpg" alt=""></li><li><img src="./img/3.jpg" alt=""></li><li><img src="./img/4.jpg" alt=""></li><li><img src="./img/5.jpg" alt=""></li>
			</ul>
		  </div>
		</div>



	  </div>

	  <div class="main-bottom">
		<div class="main-left-top">
		  <h3>规章制度</h3>
		  <a href="#">MORE+</a>
		</div>
		<div class="main-left-bottom">
		  <li class="main-left-bottom-li">
			<ul><a href="#">中心对外学术交流的暂行办法</a></ul>
			<ul><a href="#">中心资料室借阅制度</a></ul>
			<ul><a href="#">中心驻所研究制度</a></ul>
			<ul><a href="#">中心章程</a></ul>
			<ul><a href="#">中心研究人员管理暂行规定</a></ul>
			<ul><a href="#">中心年度研究项目招标办法</a></ul>
			<ul><a href="#">中心科研项目经费暂行规定</a></ul>
		  </li>
		</div>
	  </div>

	  <div class="main-down-bottom">

		<ul>
		  <li><img src="./img/11.jpg"><p>教务系统</p></li>
		  <li><img src="./img/22.jpg"><p>学工在线</p></li>
		  <li><img src="./img/33.jpg"><p>学生导航</p></li>
		  <li><img src="./img/44.jpg"><p>校园书馆</p></li>
		  <li><img src="./img/55.jpg"><p>办公系统</p></li>
		  <li><img src="./img/66.jpg"><p>办公电话</p></li>
		  <li><img src="./img/77.png"><p>全景校园</p></li>
		</ul>
	  </div>

	</div>
</main>



<footer>
	<div class="footer-big">

		<div class="footer-big-div">
			<img src="./img/footer-img.png">
			<div>
			  <p>九江学院认知科学与跨学科研究中心</p>
			  <p>江西省九江sh市前进东路551号厚德楼642室</p>
			  <p>电话：13307928341</p>
			  <p>邮箱：568309078@qq.com</p>
			</div>
		</div>
	</div>

</footer>

</body>
	<script>

        let ull = document.querySelector(".ulll")
        let oll=document.querySelector(".olll")
        let length = ull.children.length
        console.log(length)
        for (let i = 0; i < length; i++) {
            let li = document.createElement("li");
            oll.appendChild(li)
            li.setAttribute("index",i)
            li.style.width=20+"px"
            li.style.height=20+"px"
            // li.style.backgroundColor="pink"
            li.style.display="inline-block"
            li.style.margin=3+"px"
            li.style.marginTop=280+"px"
            li.style.textAlign="center"
            li.style.cursor="pointer"
            // li.style.marginLeft=100+"px"
            li.innerText=i.toString()
            li.addEventListener("mouseenter",function (){
                clearTimeout(timer)
                let index = li.getAttribute("index");
                ull.style.marginLeft=-400*index+"px"
            })
            li.addEventListener("mouseleave",function (){
            })
        }

        let toLeft=function (){
            let width=400
            let s = ull.style.marginLeft.slice(0,-2);

            if(s==-1600){
                s=400;
            }
            s=s-width
            ull.style.marginLeft=s+"px"
        }
        let timer=setInterval(toLeft,3000)
	</script>
</html>